<template>
  <h1>循环指令相关练习</h1>
<!--  循环遍历数据-->
<!--  for(String name:arr)-->
  <ul>
    <li v-for="name in arr">{{name}}</li>
  </ul>
  <ol>
    <li v-for="(name,index) in arr">{{name+":"+index}}</li>
  </ol>
  <hr>
  <table border="1px">
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品库存</th>
    </tr>
    <tr v-for="p in productArr">
      <td>{{p.name}}</td>
      <td>{{p.price}}</td>
      <td>{{p.num}}</td>
    </tr>
  </table>
</template>

<script setup>
import {ref} from "vue";
// A a  = new a (["张三","王五","赵四","钱李","闫狗"]);
const arr = ref(["张三","王五","赵四","钱李","闫狗"])
const productArr = ref([
  {name:"小米",price:1999,num:100},
  {name:"华为",price:2999,num:100},
  {name:"VIVO",price:3000,num:100}
])
// //const arr = ref()
// arr.value = 获取数据给我们当前变量对象
// //方法 调用后端接口 得到返回值 ，从返回值类面获取数据给我们当前变量对象
</script>

<style scoped>

</style>